<template>
	<view style="margin: 10px;background-color: #fff;border-radius: 10px;">
	<!-- <view class="uni-reture">
		<uni-icons type="back" size="26" @click="goBack"></uni-icons>
	</view> -->
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<view style="padding: 15px;padding-top: 15px;">
			<uni-forms class="layout-form" v-model="FormData">
				<view class="layout-form-item" >
					<view class="form-label">处理状态: </view>
					<view class="form-type">
						<uni-tag class="uni-form-input" :inverted="true" :text="FormData.state" :type="FormData.state === '已处理' ? 'success': FormData.state === '待处理' ? 'warning' : 'error'" />
					</view>
				</view>
				<view class="layout-form-item" >
					<view class="form-label"><text>点检人员: </text></view>
					<view class="form-type">
						<view class="uni-input-infor">{{ FormData.checkUser }}</view>
						<!-- <input class="uni-form-input"  v-model="FormData.checkUser"  disabled="true"/> -->
					</view>
				</view>
				<view class="layout-form-item" >
					<view class="form-label">车 &nbsp;&nbsp;&nbsp;&nbsp; 间: </view>
					<view class="form-type">
						<view class="uni-input-infor">{{ FormData.workshop }}</view>
						<!-- <input class="uni-form-input" v-model="FormData.workshop" disabled="true"/> -->
					</view>
				</view>
				<view class="layout-form-item" v-if="FormData.lineName !=null">
					<view class="form-label">整改条线: </view>
					<view class="form-type">
						<view class="uni-input-infor">{{ FormData.lineName }}</view>
						<!-- <input class="uni-form-input" v-model="FormData.workshoparea" disabled="true"/> -->
					</view>
				</view>
				<view class="layout-form-item" >
					<view class="form-label">区 &nbsp;&nbsp;&nbsp;&nbsp; 域: </view>
					<view class="form-type">
						<view class="uni-input-infor">{{ FormData.workshoparea }}</view>
						<!-- <input class="uni-form-input" v-model="FormData.workshoparea" disabled="true"/> -->
					</view>
				</view>
				<view class="layout-form-item" >
					<view class="form-label">点检时间: </view>
					<view class="form-type">
						<view class="example-body">
							<view class="uni-input-infor">{{ FormData.createTime }}</view>
							<!-- <uni-datetime-picker :border="false" type="datetime" :clear-icon="false" v-model="FormData.createTime" @maskClick="maskClick" disabled/> -->
						</view>
					</view>
				</view>
				<view class="layout-form-item" v-if="FormData.sixProblem !=''">
					<view class="form-label">6源问题: </view>
					<view class="form-type">
						<view class="example-body">
							<view class="uni-input-infor">{{ FormData.sixProblem }}</view>
							<!-- <uni-datetime-picker :border="false" type="datetime" :clear-icon="false" v-model="FormData.createTime" @maskClick="maskClick" disabled/> -->
						</view>
					</view>
				</view>
				<view class="layout-form-item" v-if="FormData.abarbeitungUser != null">
					<view class="form-label">整 改 人: </view>
					<view class="form-type">
							<view class="uni-input-infor">{{ FormData.abarbeitungUser }}</view>
						<!-- <input class="uni-form-input" v-model="FormData.abarbeitungUser" disabled="true"/> -->
					</view>
				</view>
				<view class="layout-form-item" v-if="FormData.abarbeitungTime != null">
					<view class="form-label">整改时间: </view>
					<view class="form-type">
						<view class="example-body">
							<view class="uni-input-infor">{{ FormData.abarbeitungTime }}</view>
							<!-- <uni-datetime-picker :border="false" type="datetime" :clear-icon="false" v-model="FormData.abarbeitungTime" @maskClick="maskClick" disabled/> -->
						</view>
					</view>
				</view>
				<view class="layout-form-item" >
					<view class="form-label">问题描述: </view>
					<view class="form-type">
						<view class="uni-text-infor">{{ FormData.description }}</view>
						<!-- <uni-easyinput type="textarea" :style="{ color: '#000', opacity: 1 }" :inputBorder="false" v-model="FormData.description" disabled="true"/> -->
					</view>
				</view>
				<view class="layout-form-item" v-if="FormData.state === '已处理' && FormData.sixProblem ===''" >
					<view class="form-label">备 &nbsp;&nbsp;&nbsp;&nbsp; 注: </view>
					<view class="form-type">
						<view class="example-body">
							<view class="uni-text-infor">{{ FormData.note }}</view>
						</view>
					<!-- <uni-easyinput type="textarea" :style="{ color: '#000', opacity: 1 }" :inputBorder="false" autoHeight class="uni-form-text" v-model="FormData.note" disabled="true"/> -->
					</view>
				</view>
				<view class="layout-form-item" v-if="FormData.state === '已处理' && FormData.sixProblem !=''" >
					<view class="form-label">整改措施: </view>
					<view class="form-type">
						<view class="example-body">
							<view class="uni-text-infor">{{ FormData.note }}</view>
						</view>
					<!-- <uni-easyinput type="textarea" :style="{ color: '#000', opacity: 1 }" :inputBorder="false" autoHeight class="uni-form-text" v-model="FormData.note" disabled="true"/> -->
					</view>
				</view>
				<view class="layout-form-item"v-if="FormData.state === '暂时无法处理'" >
					<view class="form-label">原 &nbsp;&nbsp;&nbsp;&nbsp; 因: </view>
					<view class="form-type">
						<view class="example-body">
							<view class="uni-text-infor">{{ FormData.cause }}</view>
						</view>
					<!-- <uni-easyinput type="textarea" :style="{ color: '#000', opacity: 1 }" :inputBorder="false" autoHeight class="uni-form-text" v-model="FormData.cause" disabled="true"/> -->
					</view>
				</view>
				<view class="layout-form-item">
					<view class="form-label">改前图片:</view>
						<view class="example-body">
							<image class="uni-imge"
							v-for="(item, index) in FormData.frontImageListData"
							:key="index" 
							 @click="previewImage(item.url)" 
							 :src='item.url'></image>
						</view>
				</view>
				<view class="layout-form-item" v-if="FormData.backImageListData != null">
					<view class="form-label">改后图片: </view>
						<view class="example-body">
							<image 
							class="uni-imge" 
							v-for="(item, index) in FormData.backImageListData"
							:key="index"  
							@click="previewImageBack(item.url)" 
							:src='item.url'></image>
						</view>
				</view>
				<view class="demo-uni-but" v-if="FormData.state === '待处理'">
					<button v-if='isRectify' type="warn"  @click="edit()">修改</button>
				</view>
				<!-- <view class="demo-uni-row">
					<uni-row :gutter="gutter">
						<uni-col :span="12">
							<text class="uni-text">整改前: </text>
						    <view class="demo-uni-col dark">
								<image class="uni-imge"  @click="previewImage()" :src='FormData.frontImage'></image>
							</view>
							</uni-col>
							<uni-col :span="12" v-if="FormData.backImage != null">
							<text class="uni-text">整改后: </text>
							<view class="demo-uni-col light">
								<image class="uni-imge"  @click="previewImageBack()" :src='FormData.backImage'></image>
							</view>
							</uni-col>
					</uni-row>
				</view> -->
			</uni-forms>
		</view>

	</view>
</template>

<script>
	import { post, postForm } from '../../../utils/request.js';
	export default {
		data() {
			return {
				userInfor: uni.getStorageSync('userInfor'),
				isRectify: '',
				id: '',
				title: '',
				gutter: 2,
				FormData: {
					checkUserId: '',
					createTime: new Date(),
					description: '',
					frontImage: '',
					name: '',
					workshopId: '',
					workshopareaId: ''
				},
				shopOption: [],
				spaceOption: [],
				checkName:'检&ensp;车&ensp;人：',
				single:  new Date(),
				mediaType:['image', 'audio'],
				urlidex: ''
			}
		},
		onShow() {
			this.userInfor = uni.getStorageSync('userInfor')
			this.isRectify = this.userInfor.isRectify
		},
		onLoad(options) {
			//console.log(options)
			this.id = options.id
			this.urlidex = options.url
			//debugger
			//this.getInfor()
			this.getData()
		},
		methods: {
			clickInter(){
				
			},
			edit() {
				uni.navigateTo({
				    url: '/pages/position/posAll/editPostion?id=' + this.id // 跳转页面的路径
				});
			},
			//车间、检车区域查询
			getInfor() {
				//车间
				post('/workshop/list')
				      .then(data => {
						  if(data.data!='fail') {
							  let opt = data.data
							  let midData =[]
							  for(var i = 0; i < opt.length; i++) {
								  midData[i] = {}
								  midData[i].value = opt[i].id
								  midData[i].text = opt[i].workshop
							  }
						    this.shopOption = midData
						  } else {
							  uni.showToast({
							    icon: 'none',
							    title: data.message
							  });
						  }
				      })
				      .catch(err => {
				        uni.showToast({
				          icon: 'none',
				          title: '查询失败，请检查接口返回'
				        });
				      });
				//区域
				post('/workshoparea/list')
				      .then(data => {
						  if(data.data!='fail') {
							  let opt = data.data
							  let midData =[]
							  for(var i = 0; i < opt.length; i++) {
								  midData[i] = {}
								  midData[i].value = opt[i].id
								  midData[i].text = opt[i].workshopArea
							  }
						    this.spaceOption = midData
						  } else {
							  uni.showToast({
							    icon: 'none',
							    title: data.message
							  });
						  }
				      })
				      .catch(err => {
				        uni.showToast({
				          icon: 'none',
				          title: '查询失败，请检查接口返回'
				        });
				      });
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				});
				postForm('/problem/selectById', {id: this.id} )
				    .then(data => {
						if(data.code == 200) {
							//debugger
							this.FormData = data.data
							if(this.FormData.frontImageListData != '' && this.FormData.frontImageListData !=null) {
								uni.hideLoading();
							} else {
								uni.hideLoading();
							}
							//console.log(this.FormData)
							//debugger
						} else {
							  uni.showToast({
							    icon: 'none',
							    title: data.message
							  });
						}
				    })
				    .catch(err => {
				        uni.showToast({
				           icon: 'none',
				          title: '获取数据失败，请检查接口返回'
				        });
				    });
			},
			selChange() {},		
			previewImage(url) {
				let img = []
				img[0] = url
				uni.previewImage({
					current: 0,
				    urls: img // 图片列表
				    });
			},
			previewImageBack(url) {
				let img = []
				img[0] = url
				uni.previewImage({
					current: 0,
				    urls: img // 图片列表
				    });
			},
			goBack() {
				let pageUrl =''
				if(this.urlidex === '1') {
					pageUrl = '/pages/position/posAll/index'
				}
				//debugger
				uni.switchTab({
					url: pageUrl
				});
			},
		    change(e) {
				this.single = e
				console.log('change事件:', this.single = e);
						},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			maskClick(e){
				console.log('maskClick事件:', e);
			}
		}
	}
</script>

<style>
	.uni-easyinput__content-textarea {
		color: #000 !important;
	    position: relative;
	    overflow: hidden;
	    flex: 1;
	    line-height: 1.5;
	    font-size: 14px;
	    margin: 6px;
	    margin-left: 0;
	    height: 50px !important;
	    min-height: 50px !important;
	    min-height: 50px !important;
	    width: auto;
	}
	.demo-uni-but {
		padding-top: 10px;
		text-align: center;
	}
	.mini-btn{
		display: inline;
		width: 20% !important;
	}
	.uni-easyinput__textarea .is-disabled{
	  color: #000 !important; /* 修改为你想要的颜色 */
	  opacity: 1; /* 如果需要，可以调整透明度 */
	}
	.uni-easyinput__textarea[disabled] {
	  color: #000 !important;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.text-area{
		margin-top: 100px;
	}
	.uni-reture {
		height: 20px;
		margin-top: 20px;
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.uni-imge {
		height: 70px;
		width: 70px;
		margin-top: 10px;
	}
	.uni-form-input {
		text-align: center;
		border: 0px;
		height: 35px;
		color: #606266;
		font-size: 14px;
		font-weight: 300;
	}
	.uni-form-text {
		align-items: center !important;
		justify-content: center !important;
		border: 0px !important;
		text-align: center !important;
		height: 35px;
		color: #000 !important;
		font-size: 14px;
		font-weight: 300;
	}
	.form-label {
		width: 20%;
		line-height: 35px;
		text-align: right;
		font-size: 14px;
		color: #606266;
		margin-right: 5px;
		font-weight: 600;
	}
	.uni-text-infor {
		font-size: 14px;
		color: #606266;
		text-align: left;
	}
	.uni-input-infor {
		font-size: 14px;
		color: #606266;
	}
	.form-label-img {
		width: 23%;
		line-height: 35px;
		text-align: right;
		font-size: 14px;
		/* color: #606266; */
		margin-right: 5px;
		font-weight: 500;
	}
	.uni-text {
		font-weight: 500;
		font-size: 14px;
		margin-bottom: 10px;
		margin-left: 10px;
	}
		.layout-form-item {
			padding: 5px 0;
			line-height: 37px;
			display: flex;
			border-top: 1px solid lightgray;
		}
		.demo-uni-row {
			border-top: 1px solid lightgray;
			padding-top: 10px;
		}
		.layout-form {
			padding: 0 10px;
			margin-top: 15px;
			text-align: center;
			background-color: #fff;
		}
		.form-type {
			//font-size: 12px;
			width: 80%;
		   line-height: 35px;
		   text-align: center;
		}
		.form-type-input {
			text-align: left;
		    line-height: 35px;
			font-size: 12px;
		}
	.uni-input{
		position: relative;
		display: block;
		height: 100%;
		background: none;
		color: inherit;
		opacity: 1;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
			text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
		text-align: left;
		/* border: 2px; */
		border: 1px solid #999 !important;
		/* margin: 3px; */
	}
	.layout-form-btn {
		text-align: center;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		}
	.text-area {
		display: flex;
		justify-content: center;
	}
	.uni-btn{
		margin-top: 20px;
		text-align: center;
		width: 100%;
	}
	.mini-btn{
		display: inline;
		width: 50%;
	}
	.form-up-file {
		margin-left: 10px;
	}
	.uni-left{
		text-align: center;
		width: 50%;
		display: inline-block;
	}
	.uni-right{
		text-align: center;
		width: 50%;
		display: inline-block;
	}
	.example-body {
		background-color: #fff;
    }
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
